<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
    <script src="../react18/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
  <script  type="text/babel">
      class App extends React.Component{
        state={
            name:'laoliu',
            age: '18',
            sex:'nan'

        }
        render(){
           const {name,age,sex} =this.state;
           return(
            <div> 
                                 
                姓名:<input type='text' onChange={this.changename}/>
                <br/>
                年龄:<input type='text' onChange={this.changeage}/>
                <br/>
                性别:<input type='text' onChange={this.changesex}/>
                <br/>
                <button onClick= {this.handle}>提交</button>

            </div>
           )
          
      }
      changename = (e) => {
        const {value}= e.target;
        this.setState({
          name:value
        })
      }
      changeage = (e) =>{
        const {value}= e.target;
        this.setState({
          age:+value
        })
      }
      changesex = (e) =>{
        const {value}= e.target;
        this.setState({
          sex:value
        })
      }
      handle = (e) =>{
        const {name,age,sex}= this.state;
        console.log(name,age,sex);
      }
    }
    const root = ReactDOM.createRoot(document.getElementById('app'));
    root.render(<App/>)
  </script>
</body>
</html>